<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ include file="/WEB-INF/jspf/taglibs.jspf" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>新建广告</title>
    <link rel="stylesheet" type="text/css" href="/styles/campaign.css">
    <link href="/styles/multi-select.css" media="screen" rel="stylesheet" type="text/css">
    <link rel="stylesheet" href="/styles/zTreeStyle/zTreeStyle.css" type="text/css">
    <link rel="stylesheet" href="/styles/ad_add.css" type="text/css">
    <script type="text/javascript" src="/js/jquery.ztree.core-3.5.js"></script>
    <script type="text/javascript" src="/js/jquery.ztree.excheck-3.5.js"></script>
    <script type="text/javascript" src="/js/jquery.ztree.exedit-3.5.js"></script>
    <script type="text/javascript" src="/js/bootstrap/dist/js/bootstrapValidator.js"></script>
    <script type="text/javascript">
        localPath="ads"
        var category = [
            {name: "1", value: 1, level: 1},
            {name: "2", value: 2, level: 2},
            {name: "3", value: 3, level: 3},
            {name: "4", value: 4, level: 4}
        ]
        var subCategory = [
            {name: "1", value: 1, level: 1},
            {name: "2", value: 2, level: 1},
            {name: "3", value: 3, level: 1},
            {name: "4", value: 4, level: 1},
            {name: "a", value: 1, level: 2},
            {name: "b", value: 2, level: 2},
            {name: "c", value: 3, level: 2},
            {name: "d", value: 4, level: 2},
            {name: "一", value: 1, level: 3},
            {name: "二", value: 2, level: 3},
            {name: "三", value: 3, level: 3},
            {name: "one", value: 1, level: 4},
            {name: "tow", value: 2, level: 4}
        ]
    </script>
</head>
<body>
<div class="box-shadow pos-rlt">
    <div class="p-h-md p-v bg-white box-shadow pos-rlt">
      <h3 class="no-margin have-btn-title">广告管理&nbsp;-&nbsp;新建广告</h3>
    </div>
    <!-- 导航开始 -->
    <div class="ad-top-nav-container" style="display: block;">
        <!-- 主导航开始 -->
        <div class="ad-top-nav">
            <ul>
                <li class="active">
                    <div class="item-bg">
                        <h2>1</h2>
                        <div class="top-nav-title">
                            <h3>推广目标设置</h3>
                            <span>选择推广目标</span>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="item-bg">
                        <h2>2</h2>
                        <div class="top-nav-title">
                            <h3>广告计划设置</h3>
                            <p>计划类型、广告类型</p>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="item-bg">
                        <h2>3</h2>
                        <div class="top-nav-title">
                            <h3>投放设置</h3>
                            <p>投放时间、人群定向</p>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="item-bg">
                        <h2>4</h2>
                        <div class="top-nav-title">
                            <h3>创意设置</h3>
                            <p>广告素材和落地页</p>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="item-bg">
                        <h2>5</h2>
                        <div class="top-nav-title">
                            <h3>预览并提交</h3>
                            <p>信息确认和广告预览</p>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
        <!-- 主导航结束 -->

        <!-- 子导航开始 -->
        <div class="ad-top-nav-main">
            <form id="adGroupForm" class="ad-top-nav-main">
                <input type="hidden" id="frontAdGroupId" name="frontAdGroupId" value="${form.frontAdGroup.id}">
            <ul>
                <!-- 子导航1 -->
                <li class="top-nav-main1 top-nav-item" data-id="1">
                    <div>
                        <ul>
                            <p class="ad-top-nav-main-title">请选择您推广的目的：</p>
                            <li class="ad-next-btn one" id="1">
                                <i class="nav-main-li-icon"></i>
                                推广产品挖掘潜在客户
                                <b class="jt-icon"></b>
                            </li>
                            <li class="no-click" id="2">
                                <i class="nav-main-li-icon"></i>
                                提高品牌知名度
                            </li>
                            <li class="no-click" id="3">
                                <i class="nav-main-li-icon"></i>
                                提高企业竞争力
                            </li>
                            <li class="no-click" id="4">
                                <i class="nav-main-li-icon"></i>
                                增加网址访问量
                            </li>
                        </ul>
                    </div>
                    <input type="hidden" id="promote" name="promotionGoal">
                </li>
                <!-- 子导航1结束 -->
                
                <!-- 子导航2 -->
                <li class="top-nav-main2 top-nav-item col-sm-6 hide" data-id="2">
                    <div class="form-group">
                        <label class="col-sm-4 control-label style-label">计划类型：</label>
                        <div class="col-sm-4">
                            <div class="radio-inline">
                                <input type="radio" id="advertMobileJh" name="frontCampaignType" value="2"
                                       <c:if test="${!form.mobileIsCreated}">disabled="disabled"</c:if>
                                       <c:if test="${(form.pcIsCreated&&form.mobileIsCreated)||(form.mobileIsCreated&&!form.pcIsCreated)}">checked="true"</c:if>>
                                <label for="advertMobileJh">移动端广告计划</label>
                            </div>
                            <div class="radio-inline">
                                <input type="radio" id="advertPcJh" name="frontCampaignType" value="1"
                                       <c:if test="${!form.pcIsCreated}">disabled="disabled"</c:if>
                                       <c:if test="${form.pcIsCreated&&!form.mobileIsCreated}">checked="true"</c:if>>
                                <label for="advertPcJh">PC端广告计划</label>
                            </div>
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-sm-4 control-label style-label">广告类型：</label>
                        <div class="col-sm-4">
                            <div class="radio-inline">
                                <input type="radio" checked="true" id="img-txt-advert"> 
                                <label for="img-txt-advert">图文广告</label>
                            </div>
                            <div class="radio-inline">
                                <input type="radio" id="video-advert" disabled> 
                                <label for="video-advert">视频广告</label>
                            </div>
                        </div>
                    </div>
                    

                    <%--<div class="form-group">--%>
                        <%--<label class="col-sm-4 control-label style-label">计划日预算（元）：</label>--%>
                        <%--<div class="col-sm-8 form-group-item-txt">--%>
                            <%--<span class="" id="dayBudget">--%>
                                <%--<c:choose>--%>
                                    <%--<c:when test="${form.mobileDayBudget==0}">--%>
                                        <%--不限--%>
                                    <%--</c:when>--%>
                                    <%--<c:otherwise>--%>
                                        <%--${form.mobileDayBudget}--%>
                                    <%--</c:otherwise>--%>
                                <%--</c:choose>--%>
                            <%--</span>--%>
                            <%--<span>预算的修改，需要到广告计划列表进行修改</span>--%>
                            <%--<input type="hidden" id="pcDayBudget" value="${form.pcDayBudget}">--%>
                            <%--<input type="hidden" id="mobileDayBudget" value="${form.mobileDayBudget}">--%>
                        <%--</div>        --%>
                    <%--</div>--%>


                    <%--<div class="form-group">--%>
                        <%--<label class="col-sm-4 control-label style-label">广告出价（元）：</label>--%>
                        <%--<div class="col-sm-8 form-group-item-txt">--%>
                            <%--<span class="" id="adOffer">--%>
                                <%--<c:choose>--%>
                                    <%--<c:when test="${form.mobileAdOffer==0}">--%>
                                        <%--不限--%>
                                    <%--</c:when>--%>
                                    <%--<c:otherwise>--%>
                                        <%--${form.mobileAdOffer}--%>
                                    <%--</c:otherwise>--%>
                                <%--</c:choose>--%>
                            <%--</span>--%>
                            <%--<span>出价的修改，需要到广告计划列表进行修改</span>--%>
                            <%--<input type="hidden" id="pcAdOffer" value="${form.pcAdOffer}">--%>
                            <%--<input type="hidden" id="mobileAdOffer" value="${form.mobileAdOffer}">--%>
                            <%--<input type="hidden" id="pcOfferMessage" value="${form.pcOfferMessage}">--%>
                            <%--<input type="hidden" id="mobileOfferMessage" value="${form.mobileOfferMessage}">--%>
                            <input type="hidden" id="pcMinAdOffer" value="${form.pcMinAdOffer}">
                            <input type="hidden" id="mobileMinAdOffer" value="${form.mobileMinAdOffer}">
                        <%--</div>        --%>
                    <%--</div>--%>


                    <div class="form-group">
                        <label class="col-sm-4 control-label style-label">广告名称：</label>
                        <div class="col-sm-8 ad-name">
                            <input name="title" id="title" type="text" class="form-control" required>
                        </div>
                        <p class="top-main2-hint">广告名称仅用于对广告的管理，不对用户展示</p>

                    </div>  

                    <div class="text-center">
                        <a href="javascript:;">
                            <lable class="btn btn-primary ad-prev-btn">上一步</lable>
                        </a>
                        <label class="btn btn-primary ad-next-btn">下一步</label>
                    </div>               
                </li>
                <!-- 子导航2结束 -->

                <!-- 子导航3 -->
                <li class="top-nav-main3 top-nav-item col-sm-9 hide" data-id="3">
                    <div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label tf-date-label">投放方式：</label>
                            <div class="col-sm-4" style="text-align:left;">
                                <div class="radio-inline">
                                    <input type="radio" name="adPutType" id="adPutTypeStartTime" value="1" checked="checked">
                                    <label for="adPutTypeStartTime">从开始一直投放</label>
                                </div>
                                <div class="radio-inline">
                                    <input type="radio" name="adPutType" id="adPutTypeChooseTime" value="2">
                                    <label for="adPutTypeChooseTime">选择起止时间</label>
                                </div>
                            </div>
                            <div id="timeSelect" style="display:none ">
                                <div class="form-group">
                                    <label class="col-sm-1 control-label"></label>
                                    <div class="col-sm-4 timepick timepick-date">投放开始时间
                                        <input name="adPutStartAt" type="text" size="10"
                                               class="form-control ng-pristine ng-valid  Wdate" placeholder="选择日期"
                                               id="start"
                                               onClick="WdatePicker({skin:'twoer',minDate:'%y-%M-%d',maxDate: '#F{$dp.$D(\'end\',{d:0})}' })"
                                               style="">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-1 control-label"></label>
                                    <div class="col-sm-4 timepick">投放结束时间
                                        <input name="adPutEndAt" type="text" size="10"
                                               class="form-control ng-pristine ng-valid Wdate" placeholder="选择日期" id="end"
                                               onClick="WdatePicker({skin:'twoer',minDate: '#F{$dp.$D(\'start\',{d:0})||(\'%y-%M-{%d}\');}' })">
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="tf-menu col-sm-12" id="target">

                        </div>
                        <div class="add-btn-main">
                            <a class="btn btn-sm btn-primary add-tf-person" id="addTarget">添加投放人群</a>
                        </div>
                    </div>
                    <div class="text-center">
                        <a href="javascript:;">
                            <lable class="btn btn-primary ad-prev-btn">上一步</lable>
                        </a>
                        <label class="btn btn-primary ad-next-btn">下一步</label>
                    </div> 
                </li>
                <!-- 子导航3结束 -->

                <!-- 子导航4 -->
                <li class="top-nav-main4 top-nav-item col-sm-9 hide" data-id="4">
                    <div>
                       <div class="add-ad-cy">
                            <div class="form-group">
                                <label class="col-sm-3 control-label">广告创意：</label>
                                <div class="col-sm-9 add-ad-cy-main">
                                    <lable id="creativesButton" class="btn btn-sm btn-default" data-template="dialog" data-placement="top"
                                           data-animation="am-slide-top aside-open-backdrop" data-container="body"
                                           bs-aside="aside">从创意库中选择...
                                    </lable>
                                    <!-- 存储创意Id -->
                                    <div id="creativesInputs" style="display: none;">

                                    </div>
                                    <%--<button class="btn btn-primary">新建创意</button>--%>
                                    <button id="newCreativesButton"  type="button" class="btn btn-primary"  data-placement="top"
                                            data-animation="am-slide-top aside-open-backdrop"  data-container="body" bs-aside="aside">
                                        <i class="glyphicon glyphicon-plus"></i>
                                        新建创意
                                    </button>
                                </div>
                            </div>                            
                       </div> 

                       <div class="cy-show col-sm-12 cy-creative tops">

                       </div>

                        <div class="form-group ad-choose-landingPage">
                            <label class="col-sm-2 control-label">落地页：</label>
                            <div class="col-sm-10 ad-choose-landingPage-main">
                                <select id="diyFormId" name="diyFormId" class="form-control">
                                    <c:forEach items="${form.landingPages }" var="landingPage">
                                        <option value="${landingPage.id }"> ${landingPage.name }</option>
                                    </c:forEach>
                                </select>
                                <a href="javascript:;" class="btn btn-primary" id="addLaningPage">新建落地页</a>
                                <a href="javascript:;" class="btn btn-primary" id="landingPageUpdate">更新</a>
                            </div>
                        </div>
                        <div class="form-group ad-choose-landingPage" style="margin-top: 40px;">
                            <label class="col-sm-2 control-label ">广告出价(元/CPC)：</label>
                            <div class="col-sm-4 ad-choose-landingPage-main" style="margin-right: 18px;">
                                <input name="adOffer" id="adOffer" type="text" class="form-control" required style="width:102%;">
                            </div>
                            <p class="advert-offer">最低出价不能低于<span id="lowAdOffer"></span>元，修改出价第二天生效</p>

                        </div>

                        <div class="text-center">
                            <a href="javascript:;">
                                <lable class="btn btn-primary ad-prev-btn">上一步</lable>
                            </a>
                            <label class="btn btn-primary ad-next-btn" >下一步</label>
                        </div> 
                    </div>
                </li>
                <!-- 子导航4结束 -->

                <!-- 子导航5 -->
                <li class="top-nav-main5 top-nav-item col-sm-12 hide" data-id="5">
                    <div>
                        <div class="ad-yl">
                            <p class="ad-yl-title">广告预览</p>
                            <div class="cy-show col-sm-12 cy-creative">

                            </div>
                        </div>


                        <div class="ad-yl-desc col-sm-12 show-result">
                            <ul>
                                <li id="type1"></li>
                                <li id="type2"></li>
                                <li id="type3"></li>
                                <li id="type4"><label>广告类型</label>图文广告</li>
                                <li id="type5"></li>
                                <li id="type6"></li>
                                <li id="type7"></li>
                            </ul>
                        </div>


                        <div class="text-center">
                            <a href="javascript:;">
                                <lable class="btn btn-primary ad-prev-btn">上一步</lable>
                            </a>
                            <button class="btn btn-default" id="formSubmit">提交广告</button>
                        </div> 
                    </div>
                </li>
                <!-- 子导航5结束 -->
            </ul>
            </form>
        </div>
        <!-- 子导航结束 -->
    </div>
    <!-- 导航结束 -->

</div>
<script type="text/javascript" src="/js/jquery.multi-select.js"></script>
<script type="text/javascript" src="/js/newGroup.js"></script>
<script type="text/template" id="subtype-template">
    {{ _.each(types,function(e,i){ }}
    <option value="{{= e.id }}">
        {{= e.name }}
    </option>
    {{ }) }}
</script>
<script type="text/javascript" src="/js/plugins/uploader/jquery.uploadify.js"></script>
<script type="text/javascript" src="/js/city.js"></script>
<!--一添加提示弹窗开始-->
<div id="addModal" class="modal fade" id="onekeyReduction">
</div>
<!-- /.modal -->

<!-- 选择广告创意弹窗 -->
<div id="creatives" class="aside top fade" tabindex="-1" role="dialog" style="display: none; ">
    <div class="aside ng-scope top am-slide-top aside-open-backdrop" tabindex="-1" role="dialog" style="display: block; ">
        <div class="aside-dialog">
            <div class="aside-content">
                <div class="aside-header" ng-show="title">
                    <button type="button" class="close close-creative">×</button>
                    <h4 class="aside-title">选择广告创意</h4>
                </div>
                <div id="creativesList">
                    <div class="emp">暂无数据,请先选择广告计划</div>
                </div>

                <div class="aside-footer">
                    <button id="addCreatives" type="button" class="btn btn-primary submit-creative">提 交</button>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- 新建广告创意弹窗 -->
<div id="newCreatives" class="modal aside  top  fade" tabindex="-1" role="dialog" >

</div>

<%--<!-- 新建广告创意弹窗 -->--%>
<%--<div id="newCreatives" class="aside top fade" tabindex="-1" role="dialog" style="display: none;">--%>
    <%--<div class="aside-dialog">--%>
        <%--<div class="aside-content">--%>
            <%--<div class="aside-header" ng-show="title">--%>
                <%--<button id="newCreativesClose" class="close" type="button" data-dismiss="modal">×</button>--%>
                <%--<h4 class="aside-title">新建广告Banner</h4>--%>
            <%--</div>--%>
            <%--<div class="aside-body" ng-show="content">--%>
                <%--<form id="creativsAddForm" action="/ad_group/materials/add" method="post"--%>
                      <%--class="form-horizontal ng-scope ng-valid ng-dirty ng-pristine">--%>
                    <%--<div class="form-group">--%>
                        <%--<label class="col-sm-4 control-label">广告Banner名称</label>--%>
                        <%--<div class="col-sm-4">--%>
                            <%--<input id="nameAdd" name="name" type="text" class="form-control">--%>
                            <%--<!--修复enter按键提交表单-->--%>
                            <%--<input type="text"  style="display: none;">--%>
                        <%--</div>--%>
                    <%--</div>--%>
                    <%--<div class="form-group">--%>
                        <%--<label class="col-sm-4 control-label">Banner尺寸</label>--%>
                        <%--<div class="col-sm-4">--%>
                            <%--<select id="crtSizeAdd" name="crtSize" class="form-control">--%>
                            <%--</select>--%>
                        <%--</div>--%>
                    <%--</div>--%>
                    <%--<div class="form-group">--%>
                        <%--<label class="col-sm-4 control-label">上传图片</label>--%>
                        <%--<div class="col-sm-4">--%>
                            <%--<div class="form-file">--%>
                                <%--<input id="imageAdd" type="file">--%>
                                <%--<small class="text-muted" style="float:left;">图片格式:*.jpeg;*.jpg;*.png</small>--%>
                                <%--<image id="uploadImage"></image>--%>
                                <%--<input id="creativeImageUrlOriginalAdd" name="picPath" type="hidden"/>--%>
                                <%--<input id="creativeImageUrlAdd" name="thumbPicPath" type="hidden">--%>
                                <%--<input id="creativeImageIdAdd" name="imageId" type="hidden">--%>
                                <%--<input id="crtSizeDetailAdd" name="crtSizeDetail" type="hidden">--%>
                                <%--<input id="sitesetTypeAdd" name="sitesetType" type="hidden">--%>
                            <%--</div>--%>
                        <%--</div>--%>
                    <%--</div>--%>
                <%--</form>--%>
            <%--</div>--%>
            <%--<div class="aside-footer">--%>
                <%--<lable id="doNewCreatives" class="btn btn-primary">提 交</lable>--%>
            <%--</div>--%>
        <%--</div>--%>
    <%--</div>--%>
<%--</div>--%>


<%--<!-- 新建营销表单 -->--%>
<%--<div id="newLaddingPage" class="aside top fade" tabindex="-1" role="dialog" style="display: none;">--%>
    <%--<div class="aside-dialog">--%>
        <%--<div class="aside-content">--%>
            <%--<div class="aside-header" ng-show="title">--%>
                <%--<button id="newCreativesClose" class="close" type="button" data-dismiss="modal">×</button>--%>
                <%--<h4 class="aside-title">新建营销表单</h4>--%>
            <%--</div>--%>
            <%--<div id="newLandingPageDiv" class="aside-body" ng-show="content" style="max-height:380px; overflow:auto">--%>


            <%--</div>--%>
            <%--<div class="aside-footer">--%>
                <%--<lable id="doNewLaddingPage" class="btn btn-primary">提 交</lable>--%>
            <%--</div>--%>
        <%--</div>--%>
    <%--</div>--%>
<%--</div>--%>
</body>
</html>